//引入React
import React from 'react';

//引入路由
//Switch路由视图 Route路由规则 Redirect重定向
import { Switch, Route, Redirect } from 'react-router-dom'


// 1.实现懒加载需要将之前的静态加载注销
// //引入登录页面
// import Login from './pages/Login/Login'
// //引入注册页面
// import Register from "./pages/Register/Register"
// //引入大首页
// import Index from './pages/Index/Index'

// //引入列表页
// import List from "./pages/List/List"
// //引入详情页
// import Detail from "./pages/Detail/Detail"
// //引入购物车
// import Shop from './pages/Shop/Shop'
// //引入优惠券
// import You from './pages/You/You'

//3.为了实现loading需要引入
import { DotLoading } from 'antd-mobile'

//2.引入utils中的登录拦截组件 相当于全局路由组件
import PrivateRoute from './utils/PrivateRoute';


//1.实现路由懒加载 使用React.lazy方法
const Login = React.lazy(() => import('./pages/Login/Login'))
const Register = React.lazy(() => import('./pages/Register/Register'))
const Index = React.lazy(() => import('./pages/Index/Index'))
const List = React.lazy(() => import('./pages/List/List'))
const Detail = React.lazy(() => import('./pages/Detail/Detail'))
const Shop = React.lazy(() => import('./pages/Shop/Shop'))
const You = React.lazy(() => import('./pages/You/You'))



function App() {
  return (
    <div className="App">
      {/* 配置路由 */}
      {/* 1.路由视图 */}
      {/* 2.再使用React.Suspense将Switch包裹 即可实现路由懒加载 */}
      {/* 3.网速慢的时候实现loading..效果  React.Suspense中设置fallback 配合ant库使用 只有注册为懒加载的路由才可以实现loading效果*/}
      {/* 也可以自己写一个loading页面,使用时在fallback中当成组件调用 */}
      <React.Suspense fallback={<DotLoading color='red'/>}>
        <Switch>
          {/* 2.路由规则  配置路由*/}
          <Route path='/login' component={Login}></Route>
          <Route path='/register' component={Register}></Route>
          {/* 3.使用时用PrivateRoute包裹 */}
          <PrivateRoute path='/Index' component={Index}></PrivateRoute>
          <PrivateRoute path='/List' component={List}></PrivateRoute>
          {/* 3.动态路由传参 占位符 */}
          <PrivateRoute path='/Detail/:id' component={Detail}></PrivateRoute>
          <PrivateRoute path='/Shop/:id' component={Shop}></PrivateRoute>
          <PrivateRoute path='/You' component={You}></PrivateRoute>
          <Redirect to='/login'></Redirect>
        </Switch>
      </React.Suspense>
    </div>
  );
}

export default App;
